<template>
  <div>
    <div class="header-container">
      <h1>我的购物车</h1>
      <div class="right">
        <span>清空失效商品</span>
        <span>批量删除</span>
      </div>
    </div>
    <div class="middle-container" />
    <div class="count">
      <div>
        全部商品
        <span>22</span>件
      </div>
      <div>
        服务
        <span>0</span>件
      </div>
    </div>
    <div class="main-container">
      <div class="list-container">
        <label>
          <i :class="checkAll ? 'el-icon-success' : 'el-icon-circle-check'" @change="handleCheckAllChange" />
          <span>全选</span>
        </label>
        <span class="goods-name">商品名称</span>
        <span class="goods-price">单价（元）</span>
        <span class="goods-num">数量</span>
        <span class="goods-cal">小计（元）</span>
        <span class="goods-do">操作</span>
      </div>
      <!-- 渲染 -->
      <div class="content-item">
        <div class="shipping-address">
          <i :class="checked ? 'el-icon-success' : 'el-icon-circle-check'" />
          <span style="margin-left:10px">收货地址：</span>
          <span>广东省 广州市 天河区 涌东路21号</span>
        </div>
        <!-- 渲染 -->
        <div class="monopoly-item">
          <div class="store-name">
            <i :class="checked ? 'el-icon-success' : 'el-icon-circle-check'" />
            <i class="iconfont icon-shop" />
            <span>仪器仪表专卖</span>
          </div>
          <div class="warehouse-item">
            <div class="warehouse-info">
              <i :class="checked ? 'el-icon-success' : 'el-icon-circle-check'" />
              <img src="../../assets/images/warehouse.png" alt="">
              <span>天河仓库</span>
            </div>
            <div class="goods-list">
              <!-- 渲染 -->
              <div class="goods-item">

                <i style="padding:0 10px 0 18px" :class="checked ? 'el-icon-success' : 'el-icon-circle-check'" @change="handleCheckAllChange" />
                <!-- <div class="lose-efficacy">失效</div> -->
                <img src="../../assets/images/steel.png" alt>
                <div class="item-info">
                  <div class="name">
                    <span>钢管</span>
                    <i style="padding-left: 10px;color: #ff3b30" class="iconfont icon-view-text" @click="toSearchResult" />
                  </div>
                  <div class="mark">标 号：外16内6.03</div>
                  <div class="mark">标 号：外16内6.03</div>
                  <div class="mark">标 号：外16内6.03</div>
                </div>
                <div class="univalence">58.00</div>
                <div class="numble">
                  <el-input-number
                    v-model="num"
                    :min="1"
                    @change="handleChange"
                  />
                </div>
                <div class="total-price">58.00</div>
                <div class="results-page">
                  <div class="del-roder">
                    <i class="el-icon-delete" />
                    <span>删除</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="money-container">
              <div class="money-details">
                <div class="total-money">2件商品，总商品金额：￥116.00</div>
                <div class="transportation">运输里程：200.00km</div>
                <div class="transportation-money">
                  <span>运费总价：</span>
                  <span class="all-money" @click="toFreight">￥20.00></span>
                </div>
              </div>
              <div class="total-money">店铺合计：￥116.00</div>
            </div>
          </div>
        </div>
      </div>
      <div class="foot-container">
        <div class="foot-left">
          <label>
            <i :class="checkAll ? 'el-icon-success' : 'el-icon-circle-check'" @change="handleCheckAllChange" />
            <span>全选</span>
          </label>

          <div class="right">
            <span>删除选中</span>
            <span>清除失效商品</span>
          </div>
        </div>
        <div class="foot-right">
          <div class="sum">
            <div>
              共<span>4</span>件，合计：<span class="amount">166.00</span>
            </div>
          </div>
          <div class="order-details">
            <div class="push-order" @click="pushOrder">推单</div>
            <el-popover
              v-model="visible"
              placement="top"
              width="310"
            >
              <div style="text-align: center;position: relative;">
                <div style="fomt-size:12px;text-align: right; margin-bottom:10px; cursor:pointer" class="el-icon-close" @click="visible = false" />
                <div style="height:10px" />
                <p style="margin:10px 0">平台当前暂时不支持线上交易，若有意向采购<br>可电话联系商户哦！</p>

              </div>

              <div slot="reference" class="check-details">查看商品总价及结（0）</div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      num: 1,
      checked: false,
      visible: false
    }
  },
  methods: {
    handleCheckAllChange() {},
    handleChange(value) {
      console.log(value)
    },
    toFreight() {
      // console.log('去运费详情页面')
      // this.$router.push('/')
      this.$router.push({
        path: '/prepaid'
      })
    },
    toSearchResult() {
      console.log('去搜索结果页面')
      this.$router.push('/search-result')
    },
    pushOrder() {
      this.$router.push('/push-order')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-icon-success{
color: #ff3b30;
font-size: 15px;
}
::v-deep .el-icon-circle-check{
font-size: 15px;
}
label{
  span{
    margin-left: 10px;
  }
}
::v-deep .el-icon-close{

position: absolute;
right: 0;
top: -10px;
}
::v-deep .el-popover{
      width: 310px!important;
left: 1253px!important;
    text-align: center;
}
.header-container {
  height: 57px;
  background-color: #fff;
  padding: 18px 20px 18px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 20px;
  h1 {
    font-weight: 700;
    font-size: 16px;
  }
  .right {
    color: #02a9f1;
    span:nth-child(2) {
      margin-left: 24px;
    }
  }
}
.middle-container {
  height: 20px;
  background-color: #f7f7f7;
}
.count {
  display: flex;
  background-color: #f7f7f7;
  color: #3d3d3d;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 12px;
  span {
    color: #ff4338;
  }
  div:nth-child(2) {
    margin-left: 5px;
  }
}
.main-container {
  background-color: #f7f7f7;

  .list-container {
    height: 52px;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 0 50px 0 20px;
    .goods-name {
      margin: 0 221px 0 60px;
    }
    .goods-num {
      margin: 0 104px;
    }
    .goods-do {
      margin-left: 119px;
    }
  }
  .content-item {
    margin-bottom: 20px;
    font-size: 12px;
    .shipping-address {
      padding: 11px 18px;
      display: flex;
      align-items: center;
      background-color: #fff;

      input {
        margin-right: 10px;
      }
    }
    .monopoly-item {
      // border-bottom: 3px solid #f5f5f5;
      .store-name {
        padding: 10px 18px 0 18px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        span {
          margin-left: 10px;
          font-size: 14px;
        }
        .icon-shop {
          font-size: 14px;
          color: #757575;
          margin-left: 10px;
        }
      }
      .warehouse-item {
        padding: 0px 18px 0px 0px;
        background-color: #fff;

        .warehouse-info {
          padding: 10px 18px;
          display: flex;
          align-items: center;
          img {
            width: 11px;
            height: 11px;
            object-fit: cover;
            margin: 0 10px;
          }
          span {
            color: #a7a7aaff;
          }
        }
      }
      .warehouse-item:last-child {
        .money-container {
          border-bottom: none;
        }
      }
      .goods-list {
        background-color: #fff;
        // border-bottom: 3px solid #e03523ff;
        .goods-item {
          display: flex;
          align-items: center;
          // justify-content: space-between;

          padding: 0 18px 15px 0;
          input {
            margin: 0 10px 0 18px;
          }
          .lose-efficacy {
            margin: 0 2px 0 3px;
            padding: 0 7px;
            background-color: #a7a7aa;
            border-radius: 2px;
            color: #fff;
            font-size: 11px;
          }
          img {
            width: 83px;
            height: 83px;
            object-fit: cover;
            margin-right: 30px;
          }
          .item-info {
            height: 83px;

            .name {
              font-size: 14px;
              display: flex;
              align-items: center;
              img {
                width: 14px;
                height: 14px;
                object-fit: cover;
                margin-left: 15px;
              }
              img:hover {
                cursor: pointer;
              }
            }
            .mark {
              color: #a7a7aa;
            }
          }
          .univalence {
            margin-left: 157px;
          }
          .numble {
            margin: 0 100px;
            ::v-deep .el-input-number {
              display: flex;
              width: 68px;
            }
            ::v-deep .el-input-number__decrease {
              width: 17px;
              height: 17px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-right: 1px solid #dcdfe6;
              top: 1px;
              left: 5px;
            }
            ::v-deep .el-input-number__increase {
              width: 17px;
              height: 17px;
              display: flex;
              justify-content: center;
              top: 1px;
              right: 5px;
              align-items: center;
              border-left: 1px solid #dcdfe6;
            }
            ::v-deep .el-input {
              width: 60px;
              height: 21px !important;
              left: 4px;
              // z-index: 100;
            }
            ::v-deep .el-input__inner {
              display: flex;
              width: 60px;
              padding: 0;
              justify-content: center;
              align-items: center;
              height: 19px !important;
              color: #8e8e93;

              border-radius: 0;
            }
            // .comment {
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   width: 19px;
            //   height: 19px;
            //   color: #8e8e93;
            //   border: 1px solid #f4f5f7;
            //   background-color: #f5f7fa;
            // }
            // span:nth-child(2) {
            //   width: 30px;
            //   height: 19px;
            //   border: 1px solid #f4f5f7;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   color: #8e8e93;
            // }
          }

          .results-page {
            margin-left: 116px;
            color: #6b6b6bff;
            span {
              margin-left: 10px;
            }
          }
          .results-page {
            cursor: pointer;
          }
        }
      }
    }
    .monopoly-item:last-child {
      border-bottom: 0;
    }
    .money-container {
      margin: 0 18px;
      border-top: 1px dashed #dededeff;
      border-bottom: 1px solid #dededeff;
      font-size: 14px;
      height: 69px;
      padding: 15px 0;
      display: flex;
      background-color: #fff;
      align-items: flex-end;
      justify-content: space-between;
      flex-direction: column;
      color: #6b6b6b;
      .money-details {
        display: flex;
        .transportation {
          margin: 0 25px;
        }
        .transportation-money {
          .all-money {
            color: #02a9f1;
          }
          .all-money:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
  .foot-container {
    padding: 18px;
    height: 126px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .foot-left {
      display: flex;
      .right {
        margin-left: 24px;
        color: #02a9f1;
        span:nth-child(2) {
          margin-left: 24px;
        }
      }
    }
    .foot-right {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: flex-end;
      .order-details {
        margin-top: 17px;
        display: flex;
        .push-order {
          width: 107px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #ffdbd8;
          border: 1px solid #ff3b30;
          color: #ff3b30;
          border-radius: 4px;
        }
        .push-order:hover {
          cursor: pointer;
        }
        .check-details {
          margin-left: 15px;
          width: 227px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #ff3b30;
          color: #fff;
          border-radius: 4px;
        }
        .check-details:hover{
          cursor: pointer;
        }
      }
      .sum {
        color: #3d3d3d;
        font-size: 12px;
        .amount {
          font-size: 18px;
          color: #ff3b30;
        }
      }
    }
  }
}
</style>
